<template>
	<view class="container">
		<tui-navigation-bar dropDownHide splitLine @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop"
			title="我的" backgroundColor="#fff" color="#333">
			<view class="tui-header-box" :style="{ marginTop: top + 'px' }">
				<!-- #ifndef MP -->
				<view class="tui-header-icon">
					<view class="tui-icon-box tui-icon-message" @tap="href(7)">
						<tui-icon name="message" :color="opacity > 0.8 ? '#333' : '#fff'" :size="26"></tui-icon>
						<view v-if="isLogin" class="tui-badge"
							:class="[opacity > 0.8 ? 'tui-badge-red' : 'tui-badge-white']">1</view>
					</view>
					<view class="tui-icon-box tui-icon-setup" @tap="href(2)">
						<tui-icon name="setup" :color="opacity > 0.8 ? '#333' : '#fff'" :size="26"></tui-icon>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</tui-navigation-bar>
		<!--header-->
		<view class="tui-mybg-box">
			<!-- <image src="/static/img/bg_mine.png" class="tui-my-bg" mode="widthFix"></image> -->
			<view class="tui-header-center">
				<image :src="userInfo.avatar =='' ? '/static/img/def_touxiang.png': userInfo.avatar "
					class="tui-avatar"></image>
				<view class="tui-info" v-if="isLogin">
					<view class="tui-nickname">
						{{ userInfo.nickName }}
						<!-- <image src="/static/images/mall/my/icon_vip_3x.png" class="tui-img-vip"></image> -->
					</view>
					<view class="tui-explain">{{userInfo.userName}}</view>
				</view>
				<!-- <view class="tui-login" v-if="!isLogin" @tap="login">
					<text>登录/注册</text>
					<tui-icon name="arrowright" color="#fff" :size="36" unit="rpx"></tui-icon>
				</view> -->
				<!-- #ifndef MP -->
				<!-- <view class="tui-btn-edit" v-if="isLogin">
					<tui-button type="white" :plain="true" shape="circle" width="92rpx" height="40rpx" :size="22"
						@click="href(3)">编辑</tui-button>
				</view> -->
				<!-- #endif -->
				<!-- #ifdef MP -->
				<!-- <view class="tui-set-box"> -->
					<!-- <view class="tui-icon-box tui-icon-message" @tap="href(7)">
						<tui-icon name="message" color="#333" :size="26"></tui-icon>
						<view v-if="isLogin" class="tui-badge tui-badge-white">1</view>
					</view> -->
					<!-- <view class="tui-icon-box tui-icon-setup" @tap="href(2)">
						<tui-icon name="setup" color="#333" :size="26"></tui-icon>
					</view> -->
				<!-- </view> -->
				<!-- #endif -->
			</view>
			<view class="tui-balance__box">
				<view class="tui-balance__bar">
					<view class="tui-balance">
						<view class="tui-balance__ic">绩效</view>
						<view class="tui-balance__desc mt10">￥{{userInfo.balance}}</view>
					</view>
					<tui-form-button width="162rpx" height="60rpx" :size="20" background="#fff" radius="50px" co
						color="#2FCC71" @click="incomeDetail">收入明细
					</tui-form-button>
				</view>
			</view>
		</view>

		<!--<view class="tui-clock" @tap="doClock">
			<view class="tui-clock-bg-1">
				<view class="tui-clock-bg-2">
					<text>上班\n打卡</text>
				</view>
			
			</view>
			 <tui-icon name="applets" color="#07c160" :size="44" unit="rpx"></tui-icon> 
			
		</view>-->

	</view>
</template>

<script>
	
	
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import cookie from '@/utils/store/cookie'
	export default {
		data() {
			return {
				isLogin: true,
				opacity: 0,
				top: 0, //标题图标距离顶部距离
				income:{}
			}
		},
		computed: mapGetters(['userInfo']),
		
		methods: {
			initNavigation(e) {
				this.opacity = e.opacity;
				this.top = e.top;
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			incomeDetail: function() {
				this.$yrouter.push({
					path:"/pages/business/incomeDetail/incomeDetail"
				})
			},
			
			// doClock: function() {
			// 	this.$yrouter.push({
			// 		path:"/pages/business/doTask/doTask"
			// 	})
				
			// }
			onPullDownRefresh() {
				setTimeout(() => {
					this.doGetMyIncome();
				}, 200);
			},

		},
		
	}
</script>

<style>
	.container{
		/* background-color: red; */
	}
	.tui-balance__box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.tui-balance__bar {
		width: 100%;
		height: 200rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background: linear-gradient(to right, #1EB75E, #2FCC71);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tui-balance {
		display: flex;
		flex-direction: column;

	}

	.tui-balance__ic {
		font-size: 28rpx;
		color: #fff;
	}

	.tui-balance__desc {
		font-size: 44rpx;
		line-height: 44rpx;
		color: #fff;
	}

	.tui-header-box {
		width: 100%;
		padding: 0 30rpx 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	/* #ifndef MP */
	.tui-header-icon {
		min-width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* #endif */
	/* #ifdef MP */
	.tui-set-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* #endif */
	.tui-icon-box {
		position: relative;
	}

	.tui-icon-setup {
		margin-left: 8rpx;
	}

	.tui-mybg-box {
		width: 100%;
		height: 364rpx;
		position: relative;
	}

	.tui-my-bg {
		width: 100%;
		height: 364rpx;
		display: block;
	}

	.tui-header-center {
		position: absolute;
		width: 100%;
		height: 128rpx;
		left: 0;
		top: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-avatar {
		flex-shrink: 0;
		width: 128rpx;
		height: 128rpx;
		display: block;
	}

	.tui-info {
		width: 60%;
		padding-left: 30rpx;
	}

	.tui-login {
		width: 60%;
		padding-left: 30rpx;
		font-size: 32rpx;
		line-height: 32rpx;
		color: #fff;
		display: flex;
		align-items: center;
	}

	.tui-nickname {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		display: flex;
		align-items: center;
	}

	.tui-img-vip {
		width: 56rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}

	.tui-explain {
		width: 80%;
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		opacity: 0.75;
		padding-top: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-btn-edit {
		flex-shrink: 0;
		padding-right: 22rpx;
	}

	.tui-clock {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 200rpx;
		z-index: 999;
		padding: 20rpx 25rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-clock text {
		font-size: 38rpx;
		padding-left: 10rpx;
		color: #fff;
	}

	.tui-clock-bg-1 {
		width: 188rpx;
		height: 188rpx;
		border-radius: 94rpx;
		background: #CDF6E2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-clock-bg-2 {
		width: 164rpx;
		height: 164rpx;
		border-radius: 94rpx;
		background: #2FCC71;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
